import React from 'react'
// BrowserRouter = Router +
import { Router, Route, Redirect, Switch } from 'react-router-dom'
import AuthRoute from './components/AuthRoute'
import KeepAlive from './components/KeepAlive'
import Loading from './components/Loading'
// import Article from './pages/Article'
// import ProfileChat from './pages/Profile/Chat'
// import Layout from './pages/Layout'
// import Login from './pages/Login'
// const NotFound = React.lazy(() => import('./pages/NotFound'))
import Test from './pages/Test'
import history from './utils/history'
const Layout = React.lazy(() => import('./pages/Layout'))
const Login = React.lazy(() => import('./pages/Login'))
const NotFound = React.lazy(() => import('./pages/NotFound'))
const ProfileEdit = React.lazy(() => import('./pages/Profile/Edit'))
const ProfileChat = React.lazy(() => import('./pages/Profile/Chat'))
const Search = React.lazy(() => import('./pages/Search'))
const SearchResult = React.lazy(() => import('./pages/Search/Result'))
const Article = React.lazy(() => import('./pages/Article'))

export default function App() {
  return (
    <>
      <Router history={history}>
        <React.Suspense fallback={<Loading />}>
          <KeepAlive alivePath='/home' path='/home' component={Layout} exact></KeepAlive>
          <Switch>
            {/* 重定向，需要 exact 指定精确匹配 */}
            <Redirect exact path='/' to='/home' />
            {/* 不需要 tabBar 的页面 */}
            {/* <Route path='/login' component={Login} /> */}
            <Route path='/login' component={Login} />
            <Route path='/search' exact component={Search} />
            <Route path='/search/result' component={SearchResult} />
            <Route path='/article/:id' component={Article} />
            {/* AuthRoute 需要鉴权的路由 */}
            <AuthRoute path='/profile/edit' component={ProfileEdit} />
            <AuthRoute path='/profile/chat' component={ProfileChat} />
            {/* 测试页面 */}
            <Route path='/test' component={Test} />
            {/* 404 页面 - /home 开头的不做匹配 */}
            {window.location.pathname.startsWith('/home') ? null : (
              <Route path='*' component={NotFound} />
            )}
          </Switch>
        </React.Suspense>
      </Router>
    </>
  )
}
